* {
  /* *（星号）是一个​​通用选择器​​，表示​​匹配 HTML 文档中的所有元素​​*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*使元素的宽度包含 padding 和 border*/
}

html,
body {
  height: 100%;
  font-size: 12px;
  font-family: 'microsoft yahei', Arial, Helvetica, sans-serif;
  background-color: white;
  position: relative;
  /*如果子元素使用 position: absolute;，会相对于 <body> 定位*/
  display: flex;
  flex-direction: column;
  /*设置子元素垂直排列*/
}

a {
  text-decoration: none;
  color: #333;
  cursor: pointer;
}


/*导航栏*/
#header.tip-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0.02rem 0.2rem 0 rgb(101, 151, 237);
  width: 100%;
  height: 1rem;
  /* 更合理的高度 */
  display: flex;
  /* 可选：方便内部元素布局 */
  flex-direction: row;
  justify-content: center;
}

.area {
  width: 90%;
  max-width: 14.5rem;
  height: auto;
  /*防止内容在宽屏上过度拉伸*/
  display: flex;
  /*margin-left: auto; margin-right: auto 让元素在父容器中居中*/
  justify-content: space-between;
  align-items: center;
  /*将子元素沿主轴（默认水平方向）均匀分布
    第一个子元素贴紧容器起始端，最后一个子元素贴紧容器末端
    剩余子元素在中间平均分配空间*/
  position: relative;
  /*为子元素的绝对定位提供基准*/
}

/* justify-content 属性定义了如何沿着弹性容器的主轴或网格容器的行轴分配内容元素之间及其周围的空间。
这个属性有多个值，包括 center、start、end、flex-start、flex-end、space-between、
space-around 和 space-evenly 等
align-items属性来控制子项的对齐方式
 */

.fixed_header .logo-box {
  display: flex;
}

.fixed_header .nav-box {
  display: flex;
}

.fixed_header .tel-box {
  display: flex;
}

.tip-box .logo-box a {
  display: block;
  /*标签从行内元素转为块级元素*/
  width: 2rem;
  height: auto;
  cursor: pointer;
}

.tip-box a:hover img {
  /*伪类  悬停设置*/
  transform: scale(1.1);
  /* 悬停时放大1.1倍 */
  transition: transform 0.3s ease;
  /* 为 transform 属性添加平滑过渡动画 */
}

.u-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*填满容器，比例不变，可能裁剪*/
  object-position: center;
  /*当替换元素（如图片）因 object-fit 被缩放或裁剪时，控制其在容器中的对齐位置*/
}

/*义了页面中所有带有 .u-img 类容器内的 <img> 标签（图片）的通用样式*/

.tip-box .l-city {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
}

.tip-box .l-city .now {
  cursor: pointer;
  /* 鼠标悬停时显示手型指针 */
  display: flex;
  /* 启用Flex布局 */
  justify-content: center;
  /* 内容水平居中 */
  padding: 0 0.1rem 0 0.15rem;
  /*内边距:左右不对称设计"上、右、下、左" */
  height: 0.4rem;
  /* 固定高度 */
  font-size: 0.16rem;
  font-family: Microsoft YaHei, serif;
  /* 字体设置 */
  font-weight: 400;
  color: #dd2c17;
  /* 文字红色 */
  line-height: 0.38rem;
  /*通过将 line-height 设为略小于 height 的值（0.38rem），文字会上移一点，达到视觉居中的效果；*/
  border: #dd2c17 solid 0.01rem;
  /* 红色实线粗细为0.01rem的边框  */
  border-radius: 0.2rem;
  /* 圆角（实现胶囊形状） */
}

.tip-box .l-city i {
  width: 0;
  height: 0;
  /*元素本身不占空间，完全由边框构成*/
  border: 0.07rem solid transparent;
  /* 所有边框透明 */
  border-top-color: #dd2c17;
  /* 只显示顶部红色边框 */
  transform: translateY(0.17rem);
  /*将整个三角形向下移动 0.17rem，使其与文字的垂直中心对齐*/
  margin-left: 7px;
  /*在箭头左侧添加 7px 的间距，与前面的文字（如 “全国”）保持距离*/
  vertical-align: middle;
  /*确保箭头与文字的中线对齐，而不是底部对齐。
    常用于行内元素或表格单元格，相对于父元素的基线或中线对齐。*/
}

/*最终效果红色倒三角，表示可以下拉选择城市*/

.city-out-box {
  display: none;
  /* 初始隐藏 */
  position: absolute;
  /* 相对于 .now（父元素）定位 */
  z-index: 10001;
  /* 提高层级，避免被其他元素遮挡（比 header 的 z-index 10000 高） */
  flex-wrap: wrap;
  top: 1rem;
  left: 2.13rem;
  width: 5rem;
  padding: 0.1rem;
  box-shadow: 0 0.05rem 0.1rem 0 #c4c4c4;
  /* 阴影显示 */
  border-radius: 0.05rem;
  background: #fefeff;
  /* 白色背景，与页面区分 */
}

/*这段 CSS 代码定义了一个城市选择下拉菜单的样式，
它默认隐藏，在需要时显示为一个带阴影和圆角的浮动容器。*/

ul li {
  list-style-type: none;
}

.tip-box .l-city .l-city-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.tip-box .l-city .l-city-box a {
  transition: 0.2s;
  width: 0.8rem;
  height: 0.4rem;
  padding: 0.08rem 0.0 .08rem;
  line-height: 0.25rem;
  background: #FFFFFF;
  color: #333333;
  font-size: 0.14rem;
  text-align: center;
}

.tip-box .l-city .l-city-box a:hover {
  background-color: #c9c8c8;
  color: #dd2c17;
}

.tip-box .nav-box {
  height: 1rem;
  width: auto;
  /*固定高度与宽度*/
}

/*定义了导航栏中右侧菜单区域（.nav-box）的布局规则，
主要功能是将导航菜单定位到右侧，并控制其尺寸和间距*/

/*首页  猎头服务  管理咨询.............*/

.tip-box .nav-box {
  margin-left: 2%;
  height: 1rem;
  width: 52%;
  margin-right: auto;
}

.tip-box .nav-box .nav {
  list-style-type: none;
  /*列表样式*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /*确保 .nav 元素的高度撑满父容器*/
}

/*导航右侧菜单的垂直居中和水平均匀分布*/


.tip-box .nav-box .nav .nav-item {
  height: 100%;
  text-align: center;
  position: relative;
  white-space: nowrap;
  /*强制文本在一行内显示，不换行。
    即使文本内容超出元素的宽度，也不会自动换行，
    而是会溢出到元素外部。*/
  width: auto;
  /* 自动宽度 */
  min-width: 80px;
  /* 最小宽度，防止过窄 */
}

/*单个菜单项（.nav-item）的样式规则，
主要控制菜单项的尺寸、对齐方式和定位。*/

.tip-box .nav-box .nav .nav-item .nav-link {
  display: block;
  /*将链接转换为块级元素，使其宽度自动撑满父容器*/
  font-size: 0.16rem;
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 400;
  color: #393939;
  line-height: 1rem;
  /*：当 line-height 等于元素高度时，单行文本会自动垂直居中*/
}

/*定义了导航栏中菜单项链接（.nav-link）的具体样式，*/

.tip-box .nav-box .nav .nav-link::after {
  content: "";
  display: block;
  /*块级元素的特性是 “独占一行”*/
  height: 0.02rem;
  background: #dd2c17;
  border-radius: 0.01rem;
  /*下划线圆角，使其边缘更柔和*/
  opacity: 0;
  /*下划线完全透明，不可见*/
  width: 0;
  /*下划线宽度为 0，不占据空间。*/
  position: absolute;
  /*脱离文档流*/
  left: 15%;
  bottom: .1rem;
  /*下划线距离 .nav-item 底部 0.1rem*/
  /*脱离文档流后，精准定位到元素底部的固定位置*/
  transition: all 0.3s ease;
  /* 增加过渡，让动画更流畅 */
  z-index: 10002;
}

/*使用 伪元素（::after） 为导航栏菜单项创建了一个下划线动画效果，默认隐藏，
在交互时（如悬停）显示。*/

.tip-box .nav-box .nav .nav-link:hover::after {
  width: 70%;
  /* 下划线展开宽度由0到70%，也可以按需调整 */
  opacity: 1;
  /* 显示下划线 */
  transition: all 0.3s ease;
  /* 动画过渡，让展开更丝滑 */
}

.tip-box .nav-box .nav .nav-item .hot {
  width: .26rem;
  height: .16rem;
  position: absolute;
  /*脱离文档流*/
  top: .3rem;
  right: -.08rem;
  /*右上角的效果*/
}

.tip-box .nav-box .nav .sub-box {
  position: absolute;
  width: 215%;
  /*宽度为其 “定位参考父元素” 宽度的 215%*/
  background: rgba(254, 253, 255, 0.8);
  padding: .25rem .15rem;
  top: .92rem;
  display: none;
  /*默认隐藏子菜单*/
  text-align: center;
  left: 50%;
  /*先偏移到中线*/
  margin-left: -107.5%;
  /*取 -107.5% 让子菜单整体居中*/
  /*“先偏移到中线，再拉回自身一半” 的方式，
    让子元素相对于父元素的中线对称，实现水平居中。*/
  z-index: 10001;
}

/*控制导航栏菜单项下方的子菜单（或下拉内容）的外观和位置*/

.tip-box .nav-box .nav .nav-item:hover .sub-box {
  display: block;
  /*悬停显示*/
}

.tip-box .nav-box .nav .sub-box a {
  font-size: .14rem;
  /*字体大小*/
  padding: .06rem .05rem;
  /*内边距*/
  display: block;
  /*块级*/
}

/*悬停改变颜色*/
.tip-box .nav-box .nav .nav-item .sub-box a:hover {
  color: #dd2c17;
}

.tip-box .tel-box .nav {
  display: flex;
  align-items: center;
}

/*电话相关导航区域*/

.tip-box .tel-box .nav .nav-item {
  display: flex;
  align-items: center;
  font-size: 0.16rem;
  font-family: Microsoft YaHei, sans-serif;
  font-weight: 400;
  color: #393939;
  line-height: 0.38rem;
  /*设置行高，让文字在垂直方向有合适的间*/
  margin-right: 0.2rem;
  /*给每个 .nav-item 右侧设置 0.2rem 的外边距*/
}

.tip-box .tel-box .nav .nav-item .wx {
  width: 24px;
  /*固定微信图标的宽度为 24px*/
  height: auto;
  margin-right: 0.1rem;
}

.u-img img {
  display: block;
  width: 100%;
  /*图片宽度撑满父容器*/
  height: auto;
  /*高度自适应，保持原始宽高比，防止图片变形*/
  object-fit: cover;
  /*当图片宽高比与父容器不一致时，裁剪图片并居中显示*/
  object-position: center;
}

.tel-box .nav .nav-item .erwei {
  width: 1.56rem;
  height: 1.95rem;
  /*二维码悬浮层的宽和高*/
  transition: all 0.3s;
  /*为悬浮层添加过渡动画*/
  border: 0.01rem solid #6e6e6e;
  /*给悬浮层设置灰色细边框*/
  border-radius: 0.15rem;
  /*圆角*/
  position: absolute;
  top: -2rem;
  /*“向上偏移、超出可视区域隐藏”*/
  z-index: 100;
  /*确保它显示在其他元素（如导航栏文字、图标）的上方*/
  box-shadow: 0 0 0.13rem .05rem rgba(95, 95, 95, 0.25);
  overflow: hidden;
  /*隐藏悬浮层超出内容框的部分*/
}

.tel-box .nav .nav-item:hover .erwei {
  top: 0.9rem;
  /* 从 -2rem 移动到可见位置 */
}

/*微信二维码四周是透明的，所以看起来好像没有占满父元素*/
.tel-box .nav .nav-item .erwei img {
  display: block;
  width: 100%;
  height: auto;
}

.tel-box .nav .erwei .text {
  background: linear-gradient(115deg, #ff7200, #ff4200, #cd281f);
  /*从左到右倾斜 115° 的线性渐变背景*/
  font-size: 0.16rem;
  font-family: SourceHanSansCN, serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.4rem;
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
}

.tip-box .tel-box .nav .nav-item .dh {
  width: 24px;
  margin-right: 0.1rem;
}


/*图片*/
.service_banner_container,
.service_banner_container img {
  width: 100%;
  height: auto;
}

/*预约*/
.cont-3 {
  background: #fefeff;
  background-size: cover;
  padding: 0.5rem 0;
}

.cont-3 .area {
  max-width: 14.5rem;
  display: block;
  justify-content: center;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.cont-3 .index_title {
  margin-bottom: .32rem !important;
  font-size: .4rem;
}

.cont-3 .cont3-left,
.cont-3 .cont3-right {
  width: 48%;
}

/* 移除下拉框、输入框和按钮获得焦点时的默认外边框（outline） */
select,
input,
button {
  outline: none;
}

/* 移除输入框和文本域的默认边框 */
input,
textarea {
  border: none;
}

/*这是两个类选择器的组合（权重计算为：0, 2, 0）*/
.cont-3 .cont3-left dl,
.cont-3 .cont3-right dl {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  position: relative;
}

.cont-3 .cont3-left dl dt,
.cont-3 .cont3-right dl dt {
  width: 8%;
  text-align: center;
}

/*这是三个类选择器的组合（权重计算为：0, 3, 0）*/
/*如果两个选择器权重相同，则后定义的样式会覆盖先定义的样式*/
/*但这里的情况是权重不同导致的优先级差异*/
.service_APP_yy .cont-3 dl,
.service_APP_yy .cont-3 dl dd input,
.service_APP_yy .cont-3 dl dd textarea {
  background: #f8f8f8;
}

/*给符号上色*/
.cont-3 .cont3-left dl dt .iconfont {
  color: #cd281f;
  font-size: .27rem;
  vertical-align: middle;
}

/* 符号后的小横线 */
.cont-3 .cont3-left dl dd::before,
.cont-3 .cont3-right dl dd::before {
  content: '';
  display: block;
  width: 1px;
  height: .22rem;
  background: #e5e5e5;
  position: absolute;
  left: -2px;
  top: 10px;
}

.cont-3 .cont3-left dl dd input {
  font-size: .14rem;
  width: 100%;
  padding: .15rem;
  border-radius: 10px;
}

.cont-3 .cont3-left dl dd,
.cont-3 .cont3-right dl dd {
  width: 91%;
  position: relative;
}

.cont-3 .cont3-left dl:nth-child(2) .iconfont {
  font-size: .35rem;
}

.cont-3 .cont3-left .special-box dl {
  width: 48.5%;
  margin-bottom: 0;
}

.cont-3 .cont3-left .special-box dl dt {
  width: 20%;
}

.cont-3 .cont3-left .special-box dl dt .iconfont {
  font-size: .25rem;
}

/* 将dl内部的子元素（<dt>和<dd>）在交叉轴上对齐到起始位置 */
.cont-3 .cont3-right dl {
  align-items: flex-start;
  margin-bottom: 0;
}

.cont-3 .cont3-right dl dt {
  margin-top: .12rem;
}

.cont-3 .cont3-right dl dt .iconfont {
  color: #cd281f;
  font-size: .22rem;
  vertical-align: middle;
}

.cont-3 .cont3-right dl dd textarea {
  width: 95%;
  border: none;
  resize: none;
  outline: none;
  font-size: .14rem;
  font-family: "微软雅黑";
  height: 1.46rem;
  margin-left: .1rem;
  margin-top: .1rem;
}

.cont-3 .index_link {
  margin-top: .4rem;
}

.index_link button {
  height: .56rem !important;
}

.index_link {
  width: 4.2rem;
  height: .56rem;
  text-align: center;
  line-height: .56rem;
  margin: 0 auto;
  margin-top: .6rem;
  background: #cd281f;
  border-radius: 50px;
  box-shadow: 1px 1px 10px #f69691;
}

.gw_fiexd .index_link2 button,
.index_link button {
  width: 100%;
  height: 45px;
  background: none;
  color: #fff;
  cursor: pointer;
  font-size: .2rem;
  border: none;
}

.cont-3 .error_box {
  text-align: center;
  color: #333;
  margin-top: .1rem;
  font-size: .142rem;
  line-height: .3rem;
}

/* 红色背景 */
.cont-3 .error_box .iconfont {
  color: #cd281f;
  font-size: .2rem;
  vertical-align: middle;
  margin-right: 0;
}

.cont-item-container .cont4-item:hover p {
  color: #f67754 !important;
}